<template>
  <div style="height: 100%;">

    <el-row style="height: 100%;"
            class="content-item">
      <el-col :span="10"
              class="borderBox">
        <el-button type=""
                   size="small"
                   @click="add(1)">+添加</el-button>
        <span style="margin: 0 20px">检查项目</span>
        <span>总分
          （<span v-if="totalScore === 100">{{totalScore}}分</span>
          <span v-else
                style="color: red;">{{totalScore}}分</span>）
        </span>
        <el-table :data="tabData"
                  class="table-header-gray"
                  highlight-current-row
                  ref="singleTable"
                  @current-change="handleCurrentChange1"
                  style="width: 100%;margin-top: 10px;">
          <el-table-column property="name"
                           label="检查项目">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="remove(1, scope.row.id)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14"
              class="borderBox">
        <el-button type=""
                   size="small"
                   @click="add(2)">+添加</el-button>
        <span style="margin: 0 20px">检查内容</span>
        <span>总分
          （<span v-if="totalScore2 === 100">{{totalScore2.toFixed(2)}}分</span>
          <span v-else
                style="color: red;">{{totalScore2.toFixed(2)}}分</span>）
        </span>
        <el-table :data="tabData2"
                  class="table-header-gray"
                  style="width: 100%;margin-top: 10px;">
          <el-table-column property="content"
                           label="检查内容">
          </el-table-column>
          <el-table-column property="score"
                           label="评分">
          </el-table-column>
          <el-table-column property="checkType"
                           label="检查类型">
            <template slot-scope="scope">
              <span v-if="scope.row.checkType === 1">卫生检查</span>
              <span v-if="scope.row.checkType === 2">违章检查</span>
              <span v-if="scope.row.checkType === 3">禁止项目</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="remove(2, scope.row.id)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <dialog-add :dialogShow="dialogShow"
                @sure="sure"
                :id="id"
                @handleClose="handleClose"></dialog-add>
    <el-dialog title="添加"
               :visible.sync="promptShow"
               width="500px"
               :before-close="handleClose">
      <el-form ref="promptForm"
               :model="promptForm"
               :inline="true"
               :rules="rules">
        <el-form-item label="检查项目名称："
                      prop="programName">
          <el-input v-model.trim="promptForm.programName"
                    size="small"
                    style="width: 300px;"
                    placeholder="请输入检查项目名称"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleClose"
                   size="small">取 消</el-button>
        <el-button type="primary"
                   @click="promptSure"
                   size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dialogAdd from './dialog-checkProgram-add'
import {
  _getCheckProjectList,
  _getlistByProjectId,
  _addCheckProject,
  _delCheckProject,
  _delCheckProjectItem,
  _getTotalScore
} from '@api/systemManage'
export default {
  components: {
    dialogAdd
  },
  data () {
    return {
      dialogShow: false,
      promptShow: false,
      promptForm: {
        programName: ''
      },
      rules: {
        programName: [
          { required: true, message: '请输入检查项目名称', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,20}$/, message: '请输入检查项目名称（最多20字,不能含特殊字符）', trigger: 'blur' }
        ]
      },
      collegeName: '',
      schoolArea: '',
      tabData: [],
      tabData2: [],
      id: null,
      totalScore: 0,
      totalScore2: 0
    }
  },
  mounted () {
    this.getCheckProjectList()
    this.getTotalScore()
  },
  methods: {
    getTotalScore () {
      _getTotalScore().then(res => {
        this.totalScore = res.data
      })
    },

    add (num) {
      if (num === 1) {
        this.promptShow = true
        // this.$prompt('请输入检查项目名称', '添加', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   inputPattern: /^ [\s\S]{ 1, 20}$ /,
        //   inputErrorMessage: '请输入检查项目名称（最多20字）'
        // }).then(({ value }) => {
        //   if (value.trim()) {
        //     _addCheckProject({ name: value.trim() }).then(res => {
        //       this.$message({
        //         type: 'success',
        //         message: '添加成功'
        //       })
        //       this.getCheckProjectList()
        //     })
        //   } else {
        //     this.$message.error()
        //   }
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '取消添加'
        //   })
        // })
      }
      if (num === 2) {
        this.dialogShow = true
      }
    },
    promptSure () {
      this.$refs.promptForm.validate(valid => {
        if (valid) {
          _addCheckProject({ name: this.promptForm.programName }).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.getCheckProjectList()
            this.handleClose()
          })
        }
      })
    },
    remove (num, id) {
      this.$confirm('确定移除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        if (num === 1) {
          _delCheckProject(id).then(res => {
            this.$message.success('移除成功')
            this.getCheckProjectList()
          })
        }
        if (num === 2) {
          _delCheckProjectItem(id).then(res => {
            this.$message.success('移除成功')
            this.getlistByProjectId(this.id)
          })
        }
      }).catch(() =>
        this.$message.info('已取消移除')
      )
    },
    handleCurrentChange1 (val) {
      this.$refs.singleTable.setCurrentRow(val)
      this.id = val.id
      this.getlistByProjectId(val.id)
    },
    handleClose () {
      this.dialogShow = false
      this.promptShow = false
      this.$refs.promptForm.resetFields()
    },
    sure () {
      this.$message.success('添加成功')
      this.getlistByProjectId(this.id)
    },
    getCheckProjectList () {
      _getCheckProjectList().then(res => {
        this.tabData = res.data
        if (res.data.length) {
          this.handleCurrentChange1(res.data[0])
        }
      })
    },
    getlistByProjectId (id) {
      _getlistByProjectId(id).then(res => {
        this.tabData2 = res.data
        this.totalScore2 = 0
        res.data.forEach(ele => {
          this.totalScore2 += ele.score
        })
        this.getTotalScore()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.borderBox {
  border: 1px solid #cccccc;
  display: block;
  padding: 10px;
  height: 100%;
  overflow: auto;
}
</style>
